<template>
  <div class="my">
    <div class="box" v-if="isShow">
      <!-- 头部图片 -->
      <div class="head">
        <div class="pic">
          <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
        </div>
      </div>
      <!-- banner -->
      <div class="banner">
        <div class="picture">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
        <p>游客</p>
        <div class="login">
          <button class="dl" to="/login" @click="loginFn">去登录</button>
        </div>
      </div>
    </div>
    <div class="box1" v-else>
      <!-- 头部图片 -->
      <div class="head">
        <div class="pic">
          <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
        </div>
      </div>
      <!-- banner -->
      <div class="banner">
        <div class="picture">
          <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
        </div>
        <p>{{ infoList.nickname }}</p>
        <div class="login">
          <button class="dl" to="/login" @click="loginOutFn">退出</button>
        </div>
        <div class="foot">
          <p>编辑个人资料</p>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star-o" to="/login" text="我的收藏" />
        <van-grid-item icon="wap-home-o" to="/login" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="manager-o" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="练习我们" />
      </van-grid>
    </div>
    <div class="foot">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getToken } from '../utils/storage'
import { getUser } from '@/api/my'
import { removeToken } from '../utils/storage'
export default {
  data () {
    return {
      infoList: {},
      token: '',
      isShow: true
    }
  },
  async created () {
    this.token = getToken()
    // console.log(this.token)
    if (this.token) {
      // console.log(this.token)
      const res = await getUser()
      console.log(res)
      // console.log(res)
      this.infoList = res.body
      this.isShow = !this.isShow
    } else {
      this.isShow = true
    }
  },
  methods: {
    loginFn () {
      this.$router.push('/login')
    },
    loginOutFn () {
      removeToken()
      this.isShow = true
    }
  }
}
</script>

<style scoped>
.my {
  position: relative;
  text-align: center;
  line-height: 50px;
}

.head .pic img {
  width: 100%;
}
.banner {
  position: absolute;
  background: #fff;
  width: 75%;
  height: 35%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  box-shadow: 0 0 10px 3px #ddd;
  margin-top: -50px;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
}
.banner p {
  transform: translateY(-70px);
  text-align: center;
  font-size: 13px;
}
.banner .picture img {
  width: 100%;
  border-radius: 50%;
}
.picture {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
}
button {
  font-size: 12px;
  transform: translateY(-70px);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  margin-top: -80px;
  width: 70px;
  height: 35px;
  line-height: 35px;
  background-color: #21b97a;
  border-radius: 5px;
  border: none;
}
.dl {
  color: #fff;
}
.list {
  transform: translateY(70%);
}
.foot {
  transform: translateY(120%);
  border-radius: 15px;
  margin: 0 15px;
}
.foot img {
  width: 100%;
}
.foot p {
  margin-top: -45px;
}
.edit {
  color: #999;
  font-size: 12px;
  margin-top: 20px;
}
.box1.banner img {
  width: 100%;
  border-style: none;
}
.box1.banner p {
  margin-top: -30px;
  margin-bottom: 10px;
}
.list1 {
  transform: translateY(30px);
}
.foot img {
  transform: translateY(40px);
}
</style>
